<template style="background-color:#f7f7f7;">
    <el-container>
        <el-container>
<!--            <el-header></el-header>-->
            <el-main>
                <!--左侧菜单栏-->
                <el-row class="tac" :gutter="20" type="flex" justify="space-between">
                    <el-col :span="4">
                        <h1 class="vueadminTitle">VUEADMIN</h1>
                        <el-menu
                                default-active="2"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose">

                            <el-menu-item index="1">
                                <i class="el-icon-menu"></i>
                                <span slot="title">首页</span>
                            </el-menu-item>

                            <el-menu-item index="2">
                                <i class="el-icon-menu"></i>
                                <span slot="title">应用管理</span>
                            </el-menu-item>

                            <el-submenu index="3">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>日志管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="3-1">日志1</el-menu-item>
                                    <el-menu-item index="3-2">日志2</el-menu-item>
                                    <el-menu-item index="3-3">日志3</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="4">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>配置管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="4-1">引导页配置</el-menu-item>
                                    <el-menu-item index="4-2">积分规则配置</el-menu-item>
                                    <el-menu-item index="4-3">
                                        <a href="/Subscribe" style="text-decoration:none; color: #599ef8">
                                            <span slot="title">订阅栏目配置</span>
                                        </a>
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="5">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>权限管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="5-1">管理员权限</el-menu-item>
                                    <el-menu-item index="5-2">普通用户权限</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="6">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>账号管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="6-1">基本信息</el-menu-item>
                                    <el-menu-item index="6-2">安全中心</el-menu-item>
                                    <el-menu-item index="6-3">退出登录</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </el-col>

                    <el-col class="subscribeMain">
                        <div class="user">
                    <span class="username">
                        {{userName}}
                    </span>
                            <img src="../../img/Jerry.jpg" class="userIcon">
                        </div>
                        <!--                <el-divider class="line"></el-divider>-->
                        <div class="line"></div>

                        <div class="title">
                            <h4 style="float: left">订阅栏目配置</h4>
                            <h5 style="float: right">配置管理 / 订阅栏目配置</h5>
                        </div>
                        <!--新增按钮-->
                        <el-form class="addButtonBlock" inline="true">
                            <el-form-item class="addButton">
                                <el-popover
                                        placement="top"
                                        width="500"
                                        v-model="visible">
                                    <el-form ref="name" inline="true" v-model="newProg" style="text-align: left">
                                        <el-form-item label="栏目名称">
                                            <el-input v-model="newProg.newName" placeholder="栏目名称" ></el-input>
                                        </el-form-item>
                                        <el-form-item label="二级栏目">
                                            <template>
                                                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                                <div style="margin: 15px 0;"></div>
                                                <el-checkbox-group v-model="checkedSecondaryProgs" @change="handleCheckedSecondaryProgChange">
                                                    <el-checkbox v-for="p in secondaryProg" :label="p" :key="p">{{p}}</el-checkbox>
                                                </el-checkbox-group>
                                            </template>
                                        </el-form-item>
                                    </el-form>
                                    <div style="text-align: right; margin: 0">
                                        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                                        <el-button type="primary" size="mini" @click="visible = false, addProg()">确定</el-button>
                                    </div>
                                    <el-button slot="reference" type="primary" style="margin-top: 8px; margin-right: 10px">
                                        <i class="el-icon-circle-plus"></i>
                                        新增一级栏目
                                    </el-button>
                                </el-popover>
<!--                                <el-button type="primary" @click="addProg()" style="margin-top: 8px; margin-right: 10px">-->
<!--                                    <i class="el-icon-circle-plus"></i>-->
<!--                                    新增一级栏目-->
<!--                                </el-button>-->
                            </el-form-item>
                        </el-form>
                        <!--订阅栏目表格-->
                        <el-table class="subscribeTab" :data="programaList">
                            <el-table-column prop="date" label="日期" width=250>
<!--                                <i class="el-icon-time"></i>-->
                                <template slot-scope="scope">
                                    <i class="el-icon-time"></i>
                                    <span style="margin-left: 10px">{{scope.row.date}}</span>
                                </template>
                            </el-table-column>

                            <el-table-column prop="name" label="姓名" width="200">
                                <template slot-scope="scope">
                                    <el-popover trigger="hover" placement="top">
                                        <p>二级栏目：</p>
                                        <p v-for="item in scope.row.secondaryProg" v-bind:key="item">{{item}}</p>
                                        <div slot="reference" class="name-wrapper">
                                            <el-tag size="medium">{{scope.row.name}}</el-tag>
                                        </div>
                                    </el-popover>
                                </template>
                            </el-table-column>

                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="view" @click="editSecProg(scope.$index, scope.row)">
                                        编辑二级栏目
                                    </el-button>
                                    <el-button size="mini" type="danger" @click="delProg(scope.$index, scope.row)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </el-container>
</template>


<script>
    const secondaryProgOptions = ["文章", "视频", "广播"];
    export default {
        name: "Subscribe",
        components: {

        },
        data: function () {
            return {
                checkAll: false,
                checkedSecondaryProgs: ["文章", "视频", "广播"],
                secondaryProg: secondaryProgOptions,
                isIndeterminate: true,

                visible: false,

                userName: "夏花花",
                newProg: {
                    date: "",
                    newName: "",
                    newSecondaryProg: ["文章", "视频", "广播"]
                },
                programa: {
                    date: "",
                    name: "",
                    secondaryProg: []
                },
                indexFlag: 4,
                programaList: [
                    {
                        date: '2016-05-02',
                        name: '上海新闻',
                        secondaryProg: ["文章", "视频"],
                        progIndex: "3"
                    },
                    {
                        date: '2016-05-04',
                        name: '艺术人生',
                        secondaryProg: ["文章", "视频", "广播"],
                        progIndex: "2"
                    },
                    {
                        date: '2016-05-01',
                        name: '学期教育',
                        secondaryProg: ["文章", "广播"],
                        progIndex: "1"
                    },
                    {
                        date: '2016-05-02',
                        name: '人文艺术',
                        secondaryProg: ["视频", "广播"],
                        progIndex: "0"
                    },
                ]
            };
        },
        methods: {
            // 新增栏目时的二级栏目复选框
            handleCheckAllChange(val) {
                this.checkedSecondaryProgs = val ? secondaryProgOptions : [];
                this.isIndeterminate = false;
                this.newProg.newSecondaryProg = this.checkedSecondaryProgs
            },
            handleCheckedSecondaryProgChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.secondaryProg.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.secondaryProg.length;
                this.newProg.newSecondaryProg = this.checkedSecondaryProgs
            },
            created() {
                // this.programaList
            },
            Appendzero(obj) {
                if (obj < 10) return "0" + "" + obj;
                else return obj;
            },
            addProg(){ // 添加栏目
                var myDate = new Date()
                var y=myDate.getFullYear();
                var m=myDate.getMonth()+1;
                var d=myDate.getDate();
                // if(pattern.toLowerCase() === 'yyyy-mm-dd'){
                //     return `${y}-${m}-${d}`
                // }else{
                //     var hh = dt.getHours()
                //     var mm = dt.getMinutes()
                //     var ss = dt.getSeconds()
                //
                //     return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                // }
                let tmp = {
                    date: `${y}-${this.Appendzero(m)}-${this.Appendzero(d)}`,
                    name: this.newProg.newName,
                    secondaryProg: this.newProg.newSecondaryProg,
                    progIndex: this.indexFlag
                }
                this.programaList.push(tmp)
                this.indexFlag++
                this.newProg.newName = ""
            },
            // editSecProg(index, row){ // 编辑角色
            //
            // },
            delProg(index){ // 删除角色
                this.programaList.splice(index, 1);
                // for (let i = 0; i < this.backupList.length; i++) {
                //     if (this.backupList[i].progIndex === this.programaList[index].progIndexIndex){
                //         this.backupList.splice(i, 1)
                //         break
                //     }
                // }
            }

        }
    }
</script>

<style>
    .el-menu-vertical-demo {
        text-align: left;
    }
    .user {
        text-align: right;
        /*position: relative;*/
        /*display: table-cell;*/
        /*vertical-align: middle;*/
        /*height: 40px;*/
        /*line-height: 40px;*/
    }
    .username {
        /*vertical-align: middle;*/
        /*height: 40px;*/
        /*line-height: 40px;*/
    }
    .userIcon {
        width: 40px;
        height: 40px;
    }
    .line {
        margin: 8px 0;
        background-color: #73beef;
        border-top: 10px #73beef;
        height: 5px;
        /*border-color: #73beef;*/
    }
    .title {
        /*position: absolute;*/
    }
    .addButton {
        /*position: absolute;*/
        text-align: right;
        background-color: #f1f2f2;
        width: 100%;
        height: 57px;
        /*margin-top: 10px*/
    }
    .vueadminTitle {
        color: #83beef;
    }
    .subscribeMain {
        background-color: #fff;
    }

    .subscribeTab {
        width: 100%
    }
</style>